import React from 'react'
import type { TimeRange } from '../types'

interface TimelinePanelProps {
  timeRange: TimeRange;
  selectedTimeRange: TimeRange;
  isDragging: 'start' | 'end' | null;
  onTimelineDrag: (e: React.MouseEvent, type: 'start' | 'end') => void;
  calculateTimeSpan: (time1: string, time2: string) => string;
}

const TimelinePanel: React.FC<TimelinePanelProps> = ({
  timeRange,
  selectedTimeRange,
  isDragging,
  onTimelineDrag,
  calculateTimeSpan
}) => {
  return (
    <div style={{
      width: '320px',
      height: '100vh',
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98))',
      backdropFilter: 'blur(15px)',
      borderRight: '1px solid rgba(0, 0, 0, 0.1)',
      padding: '24px 20px',
      boxShadow: '2px 0 12px rgba(0, 0, 0, 0.1)',
      overflow: 'auto',
      zIndex: 1000,
      display: 'flex',
      flexDirection: 'column'
    }}>
      <div style={{ 
        fontSize: '16px', 
        fontWeight: 'bold', 
        marginBottom: '15px',
        color: '#333',
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        justifyContent: 'center'
      }}>
        <span>⏰</span>
        时间轴筛选器
      </div>
      
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '15px',
        marginBottom: '15px'
      }}>
        <div style={{ fontSize: '12px', color: '#666', textAlign: 'center' }}>
          开始时间<br/>
          {timeRange.start.toLocaleDateString()}<br/>
          {timeRange.start.toLocaleTimeString()}
        </div>
        
        <div id="timeline-container" style={{ 
          position: 'relative', 
          height: '50px',
          width: '100%',
          margin: '10px 0'
        }}>
          <div style={{
            position: 'absolute',
            top: '22px',
            left: '10px',
            right: '10px',
            height: '6px',
            background: 'linear-gradient(90deg, #e0e0e0, #f0f0f0, #e0e0e0)',
            borderRadius: '3px',
            boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.1)'
          }}></div>
          
          <div style={{
            position: 'absolute',
            top: '20px',
            left: `${10 + ((selectedTimeRange.start.getTime() - timeRange.start.getTime()) / (timeRange.end.getTime() - timeRange.start.getTime())) * (100 - 8)}%`,
            width: `${Math.max(2, ((selectedTimeRange.end.getTime() - selectedTimeRange.start.getTime()) / (timeRange.end.getTime() - timeRange.start.getTime())) * (100 - 8))}%`,
            height: '10px',
            background: 'linear-gradient(90deg, #ff6600, #ff8800)',
            borderRadius: '5px',
            boxShadow: '0 2px 8px rgba(255, 102, 0, 0.4)'
          }}></div>
          
          <div
            style={{
              position: 'absolute',
              top: '12px',
              left: `${10 + ((selectedTimeRange.start.getTime() - timeRange.start.getTime()) / (timeRange.end.getTime() - timeRange.start.getTime())) * (100 - 8) - 2}%`,
              width: '24px',
              height: '24px',
              background: 'linear-gradient(135deg, #4CAF50, #66BB6A)',
              borderRadius: '50%',
              cursor: 'grab',
              border: '3px solid white',
              boxShadow: '0 3px 10px rgba(0,0,0,0.2)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '11px',
              color: 'white',
              fontWeight: 'bold',
              userSelect: 'none',
              transition: isDragging === 'start' ? 'none' : 'all 0.2s ease',
              transform: isDragging === 'start' ? 'scale(1.2)' : 'scale(1)',
              zIndex: 15
            }}
            onMouseDown={(e) => onTimelineDrag(e, 'start')}
          >
            S
          </div>
          
          <div
            style={{
              position: 'absolute',
              top: '12px',
              left: `${10 + ((selectedTimeRange.end.getTime() - timeRange.start.getTime()) / (timeRange.end.getTime() - timeRange.start.getTime())) * (100 - 8) - 2}%`,
              width: '24px',
              height: '24px',
              background: 'linear-gradient(135deg, #f44336, #ef5350)',
              borderRadius: '50%',
              cursor: 'grab',
              border: '3px solid white',
              boxShadow: '0 3px 10px rgba(0,0,0,0.2)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: '11px',
              color: 'white',
              fontWeight: 'bold',
              userSelect: 'none',
              transition: isDragging === 'end' ? 'none' : 'all 0.2s ease',
              transform: isDragging === 'end' ? 'scale(1.2)' : 'scale(1)',
              zIndex: 15
            }}
            onMouseDown={(e) => onTimelineDrag(e, 'end')}
          >
            E
          </div>
        </div>
        
        <div style={{ fontSize: '12px', color: '#666', textAlign: 'center' }}>
          结束时间<br/>
          {timeRange.end.toLocaleDateString()}<br/>
          {timeRange.end.toLocaleTimeString()}
        </div>
      </div>
      
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
        padding: '12px',
        background: 'rgba(255, 102, 0, 0.1)',
        borderRadius: '8px',
        border: '1px solid rgba(255, 102, 0, 0.2)',
        marginBottom: '15px'
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '12px', color: '#4CAF50', fontWeight: 'bold', marginBottom: '2px' }}>
            开始时间
          </div>
          <div style={{ fontSize: '13px', color: '#333' }}>
            {selectedTimeRange.start.toLocaleDateString()}<br/>
            {selectedTimeRange.start.toLocaleTimeString()}
          </div>
        </div>
        
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '12px', color: '#ff6600', fontWeight: 'bold', marginBottom: '2px' }}>
            时间跨度
          </div>
          <div style={{ fontSize: '13px', color: '#333' }}>
            {calculateTimeSpan(selectedTimeRange.start.toISOString(), selectedTimeRange.end.toISOString())}
          </div>
        </div>
        
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '12px', color: '#f44336', fontWeight: 'bold', marginBottom: '2px' }}>
            结束时间
          </div>
          <div style={{ fontSize: '13px', color: '#333' }}>
            {selectedTimeRange.end.toLocaleDateString()}<br/>
            {selectedTimeRange.end.toLocaleTimeString()}
          </div>
        </div>
      </div>
      
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '8px',
        fontSize: '12px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <div style={{ width: '12px', height: '12px', background: '#ff0000', borderRadius: '50%' }}></div>
          <span style={{ color: '#666' }}>时间范围内</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <div style={{ width: '12px', height: '12px', background: '#ff6666', borderRadius: '50%' }}></div>
          <span style={{ color: '#666' }}>部分在范围内</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
          <div style={{ width: '12px', height: '12px', background: '#ffaaaa', borderRadius: '50%' }}></div>
          <span style={{ color: '#666' }}>时间范围外</span>
        </div>
      </div>
    </div>
  )
}

export default TimelinePanel 